﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>

    <title>touch.js demo</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/test/touch.min.js"></script>
    <script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/test/cat.touchjs.js"></script>
    <script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/test/jquery-1.10.2.min.js"></script>
</head>
<body>
<div>
    <form>
        <div class="test" style="width:100px;height:100px;background-color: #FE9C3D">

        </div>
        <div class="hello"></div>
        <!--<input type="file" id="file-input" name="fileContent" class="fileV">-->

    </form>
</div>


<script>
        $('.test').click(function(){
            var page='<input type="file" id="file-input" name="fileContent" class="fileV" >';
            $('.hello').html(page);
        })


        function ajaxMvUpload(){

        }

        $('.fileV').change(function(){


        var fileInput = document.querySelector('#file-input');
        fileInput.onchange = function(){
            console.log('文件名:',this.value)
            var formData = new FormData(this.form);
            console.log(formData)
        }
        var fileInput = document.querySelector('#file-input');
        fileInput.onchange = function(){
            var filereader = new FileReader();
            var fileType = this.files[0].type;
            filereader.onload = function(){
                if(/^image\[jpeg|png|gif]/.test(fileType)){
                    console.log(this.result);
                }
            }
            console.log(this.files[0]);
            filereader.readAsDataURL(this.files[0]);
        }
        console.dir(fileInput);

        var files = document.getElementById('file-input').files;
        //files是文件选择框选择的文件对象数组

        if(this.files[0].length == 0) {
            document.execCommand("stop");
        }else {

            var form = new FormData(),
                url = 'http://www.youyiku-yishu.cn/WebApp/PhotoBooks/testUploadMv', //服务器上传地址
                file = files[0];
            form.append('file', file);

            var xhr = new XMLHttpRequest();
            xhr.open("post", url, true);

            //上传进度事件
            xhr.upload.addEventListener("progress", function(result) {
                if (result.lengthComputable) {
                    //上传进度
                    var percent = (result.loaded / result.total * 100).toFixed(2);
                }
            }, false);

            xhr.addEventListener("readystatechange", function() {
                var result = xhr;
                if (result.status != 200) { //error
                    console.log('上传失败', result.status, result.statusText, result.response);
                }
                else if (result.readyState == 4) { //finished
                    console.log('上传成功', result.response);
                }
            });
            xhr.send(form); //开始上传
        }
        })

</script>>
<script>

//    var files = document.getElementsByName('fileContent')[0].files;
//    //files是文件选择框选择的文件对象数组
//
//    if(files.length == 0) {
//        document.execCommand("stop")
//        console.log(1111);
//    }else{
//        console.log(2222);
//        var form = new FormData(),
//            url = 'hrrp://www.youyiku-yishu,cn/WebApp/PhotoBooks/uploadMv', //服务器上传地址
//            file = files[0];
//        form.append('file', file);
//
//        var xhr = new XMLHttpRequest();
//        xhr.open("post", url, true);
//
//        //上传进度事件
//        xhr.upload.addEventListener("progress", function(result) {
//            if (result.lengthComputable) {
//                //上传进度
//                var percent = (result.loaded / result.total * 100).toFixed(2);
//            }
//        }, false);
//
//        xhr.addEventListener("readystatechange", function() {
//            var result = xhr;
//            if (result.status != 200) { //error
//                console.log('上传失败', result.status, result.statusText, result.response);
//            }
//            else if (result.readyState == 4) { //finished
//                console.log('上传成功', result);
//            }
//        });
//        xhr.send(form); //开始上传
//    }
//


</script>



</body>
</html>